<script setup>

import ConsultItem from '@/components/ConsultItem.vue'
import ArrowButton from '@/components/ArrowButton.vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const onClickMore = () => {
  router.push('/consult')
}
</script>

<template>
  <div class="consult">
    <div style="flex: 4">
      <div class="title">
        <h3>最新咨询</h3>
        <ArrowButton @click="onClickMore"></ArrowButton>
      </div>
      <div class="content">
        <consult-item v-for="(item,index) in 4"></consult-item>
      </div>
    </div>


    <div class="side">
      <div class="side-item">
        <div class="side-title">
          <div style="display: flex;align-items: center;gap: 10px;font-size: 18px">
            <span style="width: 5px;height: 20px;border-radius: 3px;background-color:#39c5bb;"></span>
            本期话题
          </div>
          <ArrowButton :text="'往期话题'"></ArrowButton>
        </div>
        <div v-for="(item,index) in 2" class="side-item-img">
          <el-image fit="fill" src="src/static/test.png" style="width: 100%;height:100%"></el-image>
          <div class="mask"># {{ '标签' + item }} #</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.consult {
  width: 100%;
  padding: 20px;
  display: flex;
  box-sizing: border-box;
  gap: 20px;

  .title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
  }

  .content {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    column-gap: 30px;
  }

  .side {
    flex: 1.1;
    gap: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-radius: 5px;

    &-item {
      width: 90%;
      height: 420px;
      background-color: #fff;

      &-img {
        position: relative;
        margin: 10px 10px 0 10px;
        border-radius: 5px;
        height: 170px;

        .mask {
          border-radius: 5px;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 98;
          background-color: rgba(0, 0, 0, 0.5);
          color: #f1f1f1;
          font-size: 16px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    &-title {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>